<template>
  <div class="box">
    <div>
      <ul>
        <li :class="{'item': true}" v-for="(item, index) in map" :key="index">
          <span :class="{'high-light': item.class}" :style="{'background-color': item.color}"></span>
        </li>
      </ul>
    </div>

    <div class="df">
      <span>{{score.num}}</span>
    </div>
    <div v-if="sprite === null" class="btn" @click="handleBegin()">开始游戏</div>
  </div>
</template>

<script>
import { Square } from "./class";
export default {
  name: "HelloWorld",
  data() {
    return {
      map: [],
      sprite: null,
      score: { num: 0 }
    };
  },
  methods: {
    foucsSprite() {
      this.sprite = new Square(this.map, this.score);
      this.sprite.start().then(
        () => {
          this.foucsSprite();
        },
        () => {
          this.sprite = null;
        }
      );
    },
    handleBegin() {
      this.score.num = 0;
      this.arrInfo();
      this.foucsSprite();
    },
    arrInfo() {
      this.map = [];
      for (let i = 0; i < 160; i++) {
        this.map.push({ class: false });
      }
    }
  },
  beforeMount() {
    this.arrInfo();
    document.onkeydown = e => {
      if (this.sprite === null) return;
      switch (e.keyCode) {
        case 37: {
          this.sprite.moveLeft();
          break;
        }
        case 38: {
          this.sprite.rotation();
          break;
        }
        case 39: {
          this.sprite.moveRight();
          break;
        }
        case 40: {
          this.sprite.speedUp().then(
            () => {
              this.foucsSprite();
            },
            () => {
              this.sprite = null;
            }
          );
          break;
        }
      }
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.box {
  position: absolute;
  width: 351px;
  height: 640px;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
}
ul {
  width: 350px;
  height: 560px;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  border-left: 1px solid #f3acbb;
  border-bottom: 1px solid #f3acbb;
}
li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.item {
  width: 35px;
  height: 35px;
  border-top: 1px solid #f3acbb;
  border-right: 1px solid #f3acbb;
  box-sizing: border-box;
}
.high-light {
  display: inline-block;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}
.btn {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 50px;
  background-color: rgb(245, 35, 70);
  border-radius: 10px;
  box-shadow: 0px 0px 5px #999;
  color: #eee;
  font-weight: 700;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  cursor: pointer;
}
.df {
  width: 100%;
  height: 50px;
  background-color: #ff8a5c;
  position: absolute;
  bottom: 30px;
  border-radius: 0 0 8px 8px;
  text-align: right;
  line-height: 50px;
  padding-right: 20px;
  font-size: 22px;
  color: #777;
  font-weight: 700;
  box-sizing: border-box;
  font-style: italic;
}
</style>
